<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        * {

            margin: 0;
            padding: 0;
        }

        ul, ol {

            list-style: none;
        }

        .tab {

            margin: 0 auto;
        }

        ol {

            height: 40px;
            overflow: hidden;
        }

        ol li {

            height: 40px;
            width: 32%;
            float: left;
            line-height: 40;
            text-align: center;
            background: red;
            margin-right: 1%;
        }

        ol li.active {

            background: blue;
        }

        ul {

            box-sizing: border-box;
            height: 360px;
            border: 1px red solid
        }

        ul li {

            height: 360px;
            line-height: 360px;
            text-align: center;
            display: none;
            font-size: 40px;
        }

        ul li.active {

            display: block;
        }
    </style>
</head>
<body>

<script>
function Tab(width, height) {

    this.width = width;
    this.height = height;

    var body = document.getElementsByTagName('body')[0];
    body.innerHTML += '<div class="tab"><ol><li class="active">1</li><li>2</li><li>3</li></ol><ul><li class="active">1</li><li>2</li><li>3</li></ul></div>';
    var div = document.getElementsByTagName('div')[0];
    div.style.width = this.width + 'px';
    div.style.height = this.height + 'px';


    var btns = document.querySelectorAll("ol li");

    var views = document.querySelectorAll("ul li");

    var length = btns.length;

    for(let i = 0; i<length; i++) {

        btns[i].index = i;

        btns[i].onclick = function() {

            for(let i = 0; i<length; i++) {

                btns[i].className = "";

                views[i].className = "";
            }

            btns[this.index].className = "active";

            views[this.index].className = "active";
        }
    }
}

var tab1 = new Tab(300, 40);

</script>
</body>
</html>